<script setup lang="ts" name="h5-emergency">
import {
  getCurrentInstance,
  defineComponent,
  onMounted,
  onActivated,
  reactive,
  ref,
  toRaw,
} from "vue";
import Bus from "@/utils/eventBus";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import h5Login from "@/components/h5-login.vue";
import {
  getUserEmergencyTaskInfo,
  doEmergencyTask,
  completeUserTask,
} from "@/api/server_emergency";
let router = useRouter();
const taskInfo = ref<any>({})
const tasks = ref<any>([])
const isLeader = ref(false)
const showLogin = ref(true)
const getUserEmergencyTaskInfo_ = async ()=>{
  showLogin.value = false
  let res = await getUserEmergencyTaskInfo({
    taskId:router.currentRoute.value.params.id
  })
  taskInfo.value = res.taskInfo
  tasks.value = res.tasks
  isLeader.value = res.isLeader
}
const setOpen = (status:string)=>{
  let textMap:any = {
    processing:'确认开启预案吗？',
    cancel:'确认不开启预案吗？',
    finish:'确认完成预案吗？',
  }
  ElMessageBox.confirm(
    `<span>${textMap[status]}<span>`,
    "提 示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      center: true,
      customClass:"h5-emergency-confirm",
      dangerouslyUseHTMLString: true,
      type: "warning",
    }
  ).then(async () => {
    let res = await doEmergencyTask({
    taskId:router.currentRoute.value.params.id,
    status:status
  })
    if (res.result == "success") {
      getUserEmergencyTaskInfo_()
      ElMessage({
        type: "success",
        message: "操作成功!",
      });
    }
  });
}
const finshTask = async (t:any) =>{
  let res = await completeUserTask({
    taskToUserLogId:t.emergency_group_user_task_id
  })
  getUserEmergencyTaskInfo_()
}
onMounted(() => {
  let html:any = document.querySelector('html')
  html.classList.remove('dark')
  
});
</script>

<template>
  <div class="h5-emergency-page">
    <div class="emergency-info">
       <div class="image-info"> </div>
      <div class="video-info"> </div>
      <div>
        <p>时间：{{taskInfo.gmt_create}}</p>
        <p>地点：<span v-if="taskInfo.detectionLogInfo">{{taskInfo.detectionLogInfo.addr}}</span></p>
        <p>预警：{{taskInfo.name}}</p>
      </div>

      
    </div>

    <div class="task-info" v-if="tasks.length">
        <div class="item-task" :key="ti" v-for="(t,ti) in  tasks">
            <div class="title">
              <div class="status">
                <span class="icon" :class="t.status"></span>
              <h3>
                任务{{ti+1}}
              </h3>
              </div>
              <div v-if="isLeader">
                <el-button size="small" type="primary" v-if="t.status == 'normal'" @click="finshTask(t)">确认完成</el-button>
                <el-button size="small" disabled v-else>已完成</el-button>
              </div>
            </div>
            <div class="content">{{t.content}}</div>
          </div>
      </div>
    <div class="flex-block" v-if="isLeader&&taskInfo.status == 'wait'">
      <div>
        <el-button type="primary" @click="setOpen('processing')">开启应急预案</el-button>
      </div>
     <div>
       <el-button  @click="setOpen('cancel')">不开启应急预案</el-button>
     </div>
    
    </div>
    <div class="flex-block" v-if="isLeader&&taskInfo.status == 'processing'">
      <div>
        <el-button type="primary" @click="setOpen('finish')">完成任务</el-button>
      </div>
      </div>
      <h5Login v-if="showLogin" @login="getUserEmergencyTaskInfo_()"/>
  </div>
</template>

<style lang="scss">
.h5-emergency-page {
  width: 100%;
  min-height: 100%;
  background: #F5F5F5;
  color:#333;
  padding-bottom: 300px;
  .emergency-info {
    width:100%;
    padding:20px;
     background:#fff;
    .image-info{
      height: 193px;
      border-radius:5px;
      overflow:hidden;
      background:#ddd;
    }
    .video-info{
      height: 193px;
      border-radius:5px;
      margin: 5px 0;
      overflow:hidden;
      background:#ddd;
    }
   
   
  }
   .task-info{
       background:#fff;
       margin-top: 10px;
       padding:20px;
       .title{
        display: flex;
            justify-content:space-between;
            align-items: center;
       }
       .item-task{
        padding:20px 0;
        border-bottom: 1px dashed #c7baba;
          .status{
            width:100%;
            display: flex;
            justify-content:flex-start;
            align-items: center;
            .icon{
              display:inline-block;
              height:10px;
              width:10px;
              margin:0 10px;
              border-radius:10px;
              background:#b9b0b0;
              border: 1px solid #b9b0b0;
              &.complete{
                background: #2FCC95;
              }
              
            }
          }
          .content{
            flex: 1;
            padding-left: 30px;
          }
        }
    }
   .flex-block{
    position:fixed;
    background:#fff;
    left:0;
    bottom:0;
    width:100%;
    padding:30px 30px;
    text-align: center;
    .el-button{
      width:80%;
      height:50px;
      margin: 10px auto;
    }
  }
}
.h5-emergency-confirm{
  width:90%;
}
</style>
